<!--
 * @Descripttion: Sustainable
 * @version: 1.0.0
 * @Author: Kenny
 * @Date: 2021-11-01 15:03:03
 * @LastEditors: ~
 * @LastEditTime: 2021-12-02 12:34:28
-->
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         overflow: hidden;
         width: 100px;
         height: 100px;
         background-color: red;
      }

      .box1 {
         height: 20px;
         margin: 10px 0;
         background-color: green;
      }

      .box2 {
         height: 20px;
         margin: 20px 0;
         background-color: green;
      }
   </style>
</head>

<body>
   <div>
      <pre>
         BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
      </pre>
      <p>外边距折叠 margin-top：按照最大执行20px</p>
      <div class="container">
         <div class="box1"></div>
         <div class="box2"></div>
      </div>

   </div>
</body>

</html>